<template>
    <div class="dashboard-container" ref="vantaRef">
        <div class="dashboard-text">雾都爱情</div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as THREE from 'three'
import WAVES from 'vanta/dist/vanta.waves.min'

export default {
    name: 'Dashboard',
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    mounted() {
        //vanta
        this.vantaEffect = WAVES({
            el: this.$refs.vantaRef,
            THREE: THREE
        })
        //自定义属性
        this.vantaEffect.setOptions({
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            skyColor: 0xfa8390,
            cloudColor: 0xfa8390,
            cloudShadowColor: 0xfa8390,
            sunColor: 0xfa8390,
            speed: 1.5,
			zoom: 0.7,
			color: 0xfa8390,
			brightness: 0,
			waveHeight: 20,
			waveSpeed: 0.5,
        })
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy()
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
    padding: 0;
    width: 100%;
    height: calc(100vh - 50px);
}
.dashboard {

    &-text {
        font-size: 100px;
		line-height: 100px;
        letter-spacing: 30px;
        color: #fff;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        &::after{
            content: '雾都爱情';
            position: absolute;
            left: 0;
            top: 0;
            color: #f00;
            transform: translate(-30px ,13px) scaleY(0.7) skew(30deg);
            z-index: -1;
            filter: blur(5px);
        }
    }
}
</style>
